import React from 'react';
import { Modal, Table } from 'antd';
import { connect } from 'dva';
import { mapStateToProps, ObjectType, transferTimestamp } from '../../../../utils';
import { ModalFormContent } from './modalForm';
import style from './modifyLevelModal.less';

interface MyStateType {
  selectedRowKeys: number[];
  tableData: ObjectType[];
}

class ModifyLevelModalB extends React.Component<ObjectType, MyStateType> {
  constructor(props: ObjectType) {
    super(props);
    this.state = {
      selectedRowKeys: [],
      tableData: [], // modal渲染表格的数据
    };
  }

  componentDidMount(): void {
    const { rowsData } = this.props;
    const tableData = [].concat(rowsData);
    const userIds = tableData.map((val: ObjectType) => val.id);
    this.setState({
      selectedRowKeys: userIds,
      tableData,
    });
  }

  /*
   *  获取表格的表头（列）渲染字段
   *  return: Array
   * */
  getTableColumns = () => [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      width: 300,
    },
    {
      title: '注册时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 300,
      render: (text: number) => transferTimestamp(text),
    },
    {
      title: '当前层级',
      dataIndex: 'userLevel',
      key: 'userLevel',
      width: 300,
    },
  ];

  // 保存 修改用户层级 modal选中的层级数据
  setSelectUserLevelHandle = (payload: ObjectType) => {
    this.props.dispatch({
      type: 'risk/setSelectUserLevel',
      payload,
    });
  };

  /*
   * 表格行复选框的点击事件
   */
  onSelectUserListChange = (selectedRowKeys: number[]) => {
    const { dispatch } = this.props;
    const { tableData } = this.state;
    const newSelectedUserList: ObjectType[] = [];
    tableData.forEach((val: ObjectType) => {
      selectedRowKeys.forEach((n: number) => {
        if (val.id === n) newSelectedUserList.push(val);
      });
    });
    dispatch({
      type: 'risk/saveSelectedUserList',
      payload: newSelectedUserList,
    });
    this.setState({ selectedRowKeys });
  };

  render() {
    const {
      visible,
      handleOk,
      handleCancel,
      title,
      risk: {
        modifyUserLevelModalData: { userLevelList, selectUserLevel },
      },
      rowData,
      isGroupOption,
    } = this.props;
    // @ts-ignore
    const { selectedRowKeys, tableData } = this.state;
    const okBtnDisabled = isGroupOption
      ? !!selectUserLevel.levelId && !!selectedRowKeys.length
      : !!selectUserLevel.levelId;
    const rowSelection = {
      selectedRowKeys,
      // 选中项发生变化时的回调
      onChange: this.onSelectUserListChange,
    };
    return (
      <Modal
        title={title}
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        maskClosable={false}
        width="60%"
        centered
        className={style.modifyLevelModalStyle}
        okButtonProps={{
          disabled: !okBtnDisabled,
        }}
      >
        <ModalFormContent<>
          userLevelList={userLevelList}
          setSelectUserLevelHandle={this.setSelectUserLevelHandle}
        />
        {isGroupOption ? (
          <Table
            columns={this.getTableColumns()}
            // @ts-ignore
            rowSelection={rowSelection}
            dataSource={tableData}
            rowKey={(record: ObjectType) => record.id}
            scroll={{ y: 300 }}
            bordered
            pagination={false}
          />
        ) : (
          <Table
            columns={this.getTableColumns()}
            dataSource={rowData}
            bordered
            pagination={false}
          />
        )}
      </Modal>
    );
  }
}

export const ModifyLevelModal = connect(mapStateToProps)(ModifyLevelModalB);
